<template lang="">
    <div>
        <el-dialog :title="`添加${ques.queType == 2 ? '多行' : '单行'}填空`" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <el-form label-width="80px" :model="ques" :rules="rule" ref="ques">
                <el-form-item label="题目" prop="queQue">
                    <el-input v-model="ques.queQue" @keyup.enter.native = 'emitServer'></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="emitServer">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'AddFillDialog',
        data() {
            return {
                dialogVisible: false,
                ques: {
                    quConid: '',
                    queQue: '',
                    queType: 2
                },
                rule: {
                    queQue: { required: true, message: '请输入题目', trigger: 'blur' }
                },
                isAdding: false,
                addOptText: '',
                quConid: '',
                queId: ''
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.reset()
                        done();
                    })
                    .catch(_ => { });
            },
            reset() {
                this.ques.queQue = ''
            },
            closeDialog() {
                this.reset()
                this.dialogVisible = false
            },
            emitServer() {
                this.$refs['ques'].validate((valid) => {
                    if (valid) {
                        axios({
                            method: 'POST',
                            url: '/question/createQuestion',
                            withCredentials: true,
                            data: JSON.stringify(this.ques),    //ques是当前表单的内容
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then((result) => {
                            this.queId = result.data
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.$bus.$emit('addQuesSuccess')   //告知添加成功
                            this.closeDialog()                  //关闭Dialog
                        }).catch((err) => {
                            this.$message(err.message);
                        });

                    } else {
                        return false;
                    }
                });
            }
        },
        mounted() {
            this.$bus.$on('addNewFill', (val,type) => {
                this.dialogVisible = true
                this.ques.quConid = val
                this.ques.queType = type //如果type == 2则为多行填空，type == 3则为单行填空
            })
            this.$bus.$on('addNewFillFromBank', (val) => {
                this.dialogVisible = true
                this.ques.quConid = this.$route.query.conId
                this.ques.queQue = val.queQue
                this.ques.queType = val.queType
            })
        },
        beforeDestroy() {
            this.$bus.$off('addNewFill')
            this.$bus.$off('addNewFillFromBank')
        },
    }
</script>
<style scoped>
    .add-opt {
        padding: 0px 50px;
    }
</style>